<template>
  <div class="shop-invite-record-wrap">

    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad"
      class="van-shop-invite-record"
    >
      <div class="shop-invite-record-box" v-for="(inviteRecord,index) in inviteRecordList" :key="index">


        <div class="rubbish-record-box" v-if="inviteRecord.disposeMark == 1">
          <div class="rubbish-record-clear" @click="openInviteRecord">
            <img src="../../../images/rubbish.png" class="pic1"/>
            <span class="rubbish-title">清空已处理</span>
          </div>

        </div>

        <div class="shop-invite-record-list">
          <div class="shop-invite-record-item">
            <div class="invite-user">
              <span class="invite-phone">{{inviteRecord.userTel}}</span>
              <span class="invite-time">邀请时间：{{inviteRecord.time | formatInviteTime}}</span>
            </div>

            <span class="invite-status" v-if="inviteRecord.status == 0">待同意</span>
            <span class="invite-status invite-status-accept" v-else-if="inviteRecord.status == 1">已同意</span>
            <span class="invite-status invite-status-refuse" v-else-if="inviteRecord.status == 2">已拒绝</span>
          </div>
        </div>


      </div>
    </van-list>

    <v-empty :logo="require('../../../images/no_data.png')" title="没有数据记录~"
             v-if="inviteRecordList.length == 0 && !loading"></v-empty>

    <v-warn type="1" title="温馨提示" content="确定清空已处理的邀请记录？" :value="showInviteRecord" @cancel="hideInviteRecord"
            @confirm="clearInviteRecord" confirmText="确定"></v-warn>

  </div>
</template>

<script>
  import empty from "../../../components/empty";
  import {clearHandleShopUser, getInviteShopList} from "../../../axios/api";
  import {formatDate} from "../../../config/util";
  import warn from "../../../components/warn";

  export default {
    inject: ['reload'],
    data() {
      return {
        userMark: "",
        inviteRecordList: [],
        page: 1,
        size: 20,
        loading: false,
        finished: false,
        disposeMark: 0,
        showInviteRecord: false
      }
    },
    created() {
      let base64 = require('js-base64').Base64;
      this.userMark = base64.decode(sessionStorage.getItem("userMark"));
    },
    methods: {
      onLoad() {
        if (!this.timer) {
          this.timer = setTimeout(() => {
            this.queryInviteShopList();
            this.timer = null;
          }, 500)
        }
      },
      queryInviteShopList() {
        let params = {
          "sgin": this.userMark,
          "page": this.page,
          "size": this.size
        };

        getInviteShopList(params).then((res) => {
          if (res.code == 0) {
            if (res.data != null && res.data.length > 0) {
              this.inviteRecordList = this.inviteRecordList.concat(res.data);

              for (let i = 0; i < this.inviteRecordList.length; i++) {
                if (this.inviteRecordList[i].status != 0) {
                  this.$set(this.inviteRecordList[i], "disposeMark", 1);
                  break;
                }
              }

              this.loading = false;
              this.page++;
            } else {
              this.loading = false;
              if (this.inviteRecordList.length >= res.data.length) {
                this.finished = true;
              }
            }
          } else {
            this.$vux.toast.text(res.msg, "middle");
          }
        });
      },
      clearInviteRecord() {
        this.showInviteRecord = false;
        this.$vux.loading.show({
          text: '加载中',
        });
        let params = {
          "sgin": this.userMark,
        };
        clearHandleShopUser(params).then((res) => {
          this.$vux.loading.hide();
          if (res.code == 0) {
            if (res.data == 1) {
              this.reload();
            } else {
              this.$vux.toast.text("清空已处理失败，请重试", "middle");
            }
          } else {
            this.$vux.toast.text(res.msg, "middle");
          }
        });
      },
      openInviteRecord() {
        this.showInviteRecord = true;
      },
      hideInviteRecord() {
        this.showInviteRecord = false;
      }
    },
    filters: {
      formatInviteTime(time) {
        return formatDate(new Date(time), "yyyy-MM-dd hh:mm");
      }
    },
    components: {
      "v-empty": empty,
      "v-warn": warn
    }
  }
</script>

<style lang="less" scoped>
  @import "../../../assest/mixin";

  .shop-invite-record-wrap {
    .wh(100%, 100%);
    background: @talent-theme-bg-color;
    .shop-invite-record-list {
      .wh(100%, auto);
      background: rgba(255, 255, 255, 1);
      .shop-invite-record-item {
        display: flex;
        align-items: center;
        .wh(96.8%, 1.6rem);
        margin-left: 0.32rem;
        border-bottom: 0.027rem solid #f5f5f5;
        .invite-user {
          display: flex;
          flex-direction: column;
          .invite-phone {
            .size-color(0.427rem, rgba(51, 51, 51, 1));
            padding-bottom: 0.2rem;
          }
          .invite-time {
            .size-color(0.373rem, rgba(153, 153, 153, 1));
          }
        }
        .invite-status {
          margin-left: auto;
          margin-right: 0.32rem;
          .size-color(0.4rem, rgba(60, 175, 255, 1));
        }
        .invite-status-accept {
          color: rgba(204, 204, 204, 1);
        }
        .invite-status-refuse {
          color: rgba(255, 83, 83, 1);
        }
      }
    }
    .rubbish-record-box {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .wh(100%, 0.8rem);
      .rubbish-record-clear {
        display: flex;
        align-items: center;
        .pic1 {
          padding-left: 0.2rem;
          .wh(0.427rem, 0.427rem)
        }
        .rubbish-title {
          padding-right: 0.32rem;
          padding-left: 0.187rem;
          .size-color(0.373rem, rgba(153, 153, 153, 1));
        }
      }

    }
  }
</style>
